<template>
  <div class="Nextstop" ref="homePage">
    <div class="bj">
      <van-nav-bar title="下一站" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div class="Nextstop_tet">
      <p>你好，下一站</p>
      <span>带上最喜欢的人去看最美丽的风景</span>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in dataList" :key="index" @click="nextstopDetail(item.resSN)">
          <img width="100%" height="75%" :src="item.Cover" />
          <div class="slide_txt">
            <p class="big-p">你好，下一站是{{item.Name}}</p>
            <p class="small-p">{{item.Info}}</p>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import { NextSiteList } from '@/api/home.js'
import Swiper from 'swiper';
// import 'swiper/dist/css/swiper.min.css';
export default {

  data () {
    return {
      clintHeigth: '', //获取页面高度
      swiperOption: {
        //自动轮播
        autoplay: {
          delay: 2000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: false,
        },
        //开启循环模式
        loop: true


      },
      dataList: [],
      MyLng: 0,
      MyLat: 0
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    if (sessionStorage.getItem("city")) {
      this.current = sessionStorage.getItem("city")
    } else {
      this.mapinit()
    }
    this.NextSiteList()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1);
    },
    mapinit () { // 定位
      let that = this
      let map = new AMap.Map('container', {
        enableHighAccuracy: true,
        resizeEnable: true,
        center: [114.085947, 22.547],
        zoom: 8
      })
      // document.getElementById('adcode').innerHTML = '当前城市adcode：' + map.getAdcode() + '<br>' +
      //   '当前中心点：' + map.getCenter()
      // 获取用户所在城市信息
      function showCityInfo () {
        // 实例化城市查询类
        let citysearch = new AMap.CitySearch()
        // 自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
          that.MyLng = result.bounds.oc.lng //获取经纬度
          that.MyLat = result.bounds.oc.lat //获取经纬度
        })
      }
      showCityInfo()
    },
    NextSiteList () {
      setTimeout(() => {
        let data = {
          MyLng: this.MyLng,
          MyLat: this.MyLat
        }
        NextSiteList(data).then(res => {
          console.log(res)
          if (res.Code == 0 && res.List) {
            this.dataList = res.List
          }
          this.$nextTick(function () {
            this.swiper();
          })
        })
      }, 500)

    },
    swiper () {
      var swiper1 = new Swiper('.swiper-container', {
        // autoplay: true,
        loop: true,
      });
    },
    nextstopDetail (resSN) {   // 点击跳转
      this.$router.push({
        path: '/Scenic/product',
        query: {
          resSN: resSN
        }
      })
    },
  }
}
</script>

<style lang="scss">
.Nextstop {
  color: white;
  background: url(../../assets/1.jpg) no-repeat;
  background-size: 100% 100%;
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .Nextstop_tet {
    width: 80%;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    p {
      font-size: 28px;
      margin-bottom: 20px;
    }
  }
  .swiper-container {
    width: 100%;
    height: 450px;
    .swiper-wrapper {
      .swiper-slide {
        transform: scale(0.85);
        img {
          border: 6px solid #ffffff;
        }
        .slide_txt {
          display: none;
        }
        .big-p {
          font-size: 22px;
          line-height: 28px;
          padding: 5px 0;
        }
        .small-p {
          font-size: 13px;
          line-height: 20px;
        }
      }
      .swiper-slide-active {
        width: 300px !important;
        padding-left: 40px;
        transform: scale(1);
        z-index: 9;
        .slide_txt {
          display: block;
        }
      }
    }
  }
}
</style>
